@import 'init.scss';
@import 'constants.scss';
@import 'style.scss';


.header{
	width: 100%;
	height: 64px;
	background-color: #f2f2f2;
	border: 1px solid $lineColor;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 99;

	.container{
		width: $PageWidth;
		height: 100%;
		margin: 0 auto;

		.Name{
			font-weight: bolder;
			font-size: 30px;
			line-height: 64px;
			cursor: pointer;

			span{
				margin-left: 5px;
			}
		}

		.nav{
			margin-left: 10%;

			li{
				float: left;
				margin-right: 40px;
				line-height: 64px;

				a{
					margin-left: 5px;
				}
			}
		}

		.auth{
			line-height: 64px;
			position: relative;

			i{
				font-size: 20px;
				font-weight: normal;
			}
			a{
				font-size: 20px;
			}
			&:hover .auth-list{
				display: block;
			}
			.auth-list{
				position: absolute;
				top: 54px;
				left: 50%;
				transform: translateX(-40%);
				width: 80px;
				background-color: #fff;
				border: 1px solid $lineColor;
				border-radius: 5px;
				display: none;

				&:before{
					content: "";
					height: 0;
					position: absolute;
					top: -16px;
					left: 50%;
					transform: translateX(-50%);
					border: 8px solid;
					border-color: transparent transparent #fff transparent;
					display: inline-block;
				}
				ul{
					width: 100%;
					li{
						display: block;
						width: 100%;
						height: 30px;
						border-bottom: 1px solid $lineColor;
						line-height: 30px;
						text-align: center;
						a{
							font-size: 14px;
						}
					}
				}
			}
		}
	}
}